window.onload = function() {
    document.getElementById("message").onclick = function () {
        var a = document.querySelectorAll('dl>dd')
        for(i=0;i<4;i++){
            a[i].classList.toggle("hide")
        }
    }
    document.getElementById("superSail").onclick = function () {
        var a = document.querySelectorAll('dl>dd')
        for(i=4;i<6;i++){
            a[i].classList.toggle("hide")
        }
    }
    document.getElementById("order").onclick = function () {
        var a = document.querySelectorAll('dl>dd')
        for(i=6;i<a.length;i++){
            a[i].classList.toggle("hide")
        }
    } 
    

    //获取一共多少条信息，并根据这个更改页面底部分页的HTML
    function queryAllNO(){
        var NoOrderCount = 0
        axios.get('/home/order/order/haveNoOrderCount',{
            params:{

            }
        })
        .then(function(data){
            NoOrderCount = data.data.data.data   //这个就是返回的一共有多少条订单的数值
            console.log(NoOrderCount)
            console.log(data.data.data)
            console.log(data)
            if( NoOrderCount == "错误：用户不存在"){
                document.getElementById("myMessage").innerHTML = ``
                document.getElementById("myMessage").innerHTML += `
                <div class="nothing">订单里空空如也，赶紧去浏览添加吧</div>
                `
            }else{

                document.getElementById("paging").innerHTML=`
                <select name="pageSize" id="pageSize">
                            <option value="5">5条/页</option>
                            <option value="10">10条/页</option>
                            <option value="15">15条/页</option>
                        </select>
                        <span class="span">当前页数</span>
                        <i class="fa fa-angle-left fa-1g" aria-hidden="true" id="leftbtn"></i>
                        <span class="pagebox" id="pagebox">
                            <button class="page">1</button>
                            <button class="page">2</button>
                            <button class="page">3</button>
                            <button class="page">4</button>
                            <button class="page">5</button>
                        </span>
                        <i class="fa fa-angle-right fa-1g" aria-hidden="true" id="rightbtn"></i>
                        <input type="text" name="pagenumber" class="pagenumber" onkeyup="this.value=this.value.replace(/[^\d{0-9}]/g,'')" maxlength="2" placeholder="">页
                        <button class="jumpto">跳转</button>
                `
                let pageSize = document.getElementById("pageSize").value //现在的分页情况，即每页最多可以有几条订单信息
                var pagenum = Math.ceil(NoOrderCount/pageSize) //用两个数相除之后向上取整，获取现在最大能翻到第几页
                console.log('pagenum是'+pagenum)
                if(pagenum<=5 && pagenum > 0){
                    document.getElementById("pagebox").innerHTML = ``
                    for(let i=1;i<=pagenum;i++){
                        document.getElementById("pagebox").innerHTML += `
                        <button class="page">${i}</button>
                        `
                    }
                }else{
                    document.getElementById("pagebox").innerHTML = ``
                    for(let i=1;i<=5;i++){
                        document.getElementById("pagebox").innerHTML += `
                        <button class="page">${i}</button>
                        `
                    }
                }
                var a = 1;
                var pages = document.querySelectorAll(".page")
                for(let i=0;i<pages.length;i++){
                    pages[i].onclick = () =>{     //这个点击事件只是切换到第几页
                        a = pages[i].innerHTML
                        console.log(a)
                        queryAllOrderNo(a)  
                        //先进行判断吧，如果小于等于5就只高亮，大于5了再加后续
                        if(pagenum<=5){
                            console.log(1)
                            for(let j=0;j<pages.length;j++){
                                pages[j].style.backgroundColor = "wheat"
                                pages[j].style.color = "black"
                            }
                            pages[i].style.backgroundColor = "#F96C0C"
                            pages[i].style.color = "white"
                        } 
                    }
                }
                (function(){queryAllOrderNo(1)})();
            }
        })
        .catch(function (error){
            console.log(error)
        })
    }




    function queryAllOrderNo(pageNo){
        //获取未付款订单的数量
        console.log("遍历所有未付款订单")
        var NoOrderCount = 0
        axios.get('/home/order/order/haveNoOrderCount',{
            params:{
            }
        }).then(function(data){
            console.log("遍历所有未付款订单")
            NoOrderCount = data.data.data.data
            //获取每页所能展现的订单数目
            let pageSize = document.getElementById("pageSize").value
            if(pageNo<=Math.ceil(NoOrderCount/pageSize)){
                axios.get('/home/order/order/queryAllOrderNo',{
                    params:{
                        pageNo:pageNo,
                        pageSize:pageSize,
                    }
                }).then(function(data){
                    var list = data.data.data.data
                    console.log(list)
                    if(list.length == 0){
                        document.getElementById("myMessage").innerHTML = ``
                        document.getElementById("myMessage").innerHTML += `
                        <div class="nothing">订单里空空如也，赶紧去浏览添加吧</div>
                        `
                    }else{
                        document.getElementById("myMessage").innerHTML = `<div class="order">未付款</div>`
                        for(let i = 0;i<list.length;i++){
                            document.getElementById("myMessage").innerHTML += `
                            <div class="orderMessage">
                                <div class="shop"><a href="">${list[i].shopName}></a></div>
                                <div class="state">未付款</div>
                                <div class="goodPhoto"><a href=""><img src="/static/home/img/4.png"></a></div>
                                <div class="goodMessage">
                                    <p class="title"><a href="">${list[i].goodsName}</a></p>
                                    <p class="size"></p>
                                </div>
                                <div class="ordernumber">
                                    <p>快递单号：${list[i].orderNo}</p>
                                </div>
                                <div class="goodPrice">
                                    <p class="title">￥${list[i].goodsPrice}</p>
                                    <p class="size">×2</p>
                                </div>
                                <div class="price">
                                    <p>总价￥${2*list[i].goodsPrice}，优惠￥${2*list[i].goodsPrice}，实付￥0</p>
                                </div>
                                <div class="operate">
                                    <button>点击付款</button>
                                    <button onclick="deleteOrderNo(${list[i].orderId},${pageNo})">取消订单</button>
                                </div>
                            </div>
                            `
                        }
                    }
                }).catch(function(error){
                    console.log(error)
                })
            }
        }).catch(function (error){
            console.log(error) 
        })
    }
    // (function(){queryAllOrderNo(1)})();
    (function(){queryAllNO()})();
}
function deleteOrderNo(orderId,pageNo){
    console.log(pageNo)
    axios.put('/home/order/order/deleteOrderNO',{
        params:{
            orderId:orderId
        }
    }).then(function(data){
        var list = data.data.data.data
        if (data.data.data.code == 20000) {
            document.getElementById("floatContent").innerHTML = "<div>" + "此条订单已删除" + "</div>" + "<button onclick='closethis()' class='newbtn'>" + "确定" + "</button>";
            document.getElementById("floatContent").classList.remove("hide");
            queryAllOrderHave(pageNo)
        }else{
            document.getElementById("floatContent").innerHTML = "<div>" + "订单删除失败" + "</div>" + "<button onclick='closethis()' class='newbtn'>" + "确定" + "</button>";
            document.getElementById("floatContent").classList.remove("hide");
        }
    }).catch(function(error){
        console.log(error)
    })
}
function closethis(){
    document.getElementById("floatContent").classList.add("hide");
}